<template>
	<div>
		<!-- return {
			courseName: '', // 课程名称
			teacher: '',  // 任课教师
			university: '', // 学校
			school: '', // 学院
			major: '', // 专业
			grade: '', // 年级
			semester: '', // 学期
			learnRequire: '', // 学习要求
			teachProgress: '' // 教学进度
		} -->
		<van-field
			v-model="courseName"
			name="courseName"
			clearable
			label="课程名称"
			placeholder="请填写课程名称"
			:disabled="disable"
			required
			:rules="[{ required: true}]"
		/>
		<van-field
			v-model="title"
			name="title"
			clearable
			label="班级名称"
			placeholder="请填写班级名称"
			:disabled="disable"
			required
			:rules="[{ required: true}]"
		/>
		<!-- <van-field
			v-model="teacher"
			name="teacher"
			clearable
			label="任课教师"
			placeholder="请填写任课教师"
			
		/> -->
		
		<van-field
			v-model="school"
			is-link
			readonly
			name="school"
			@click="showSchool = true"
			label="学校"
			placeholder="请填写学校"
			required
			:rules="[{ required: true}]"
		/>
		<van-popup v-model="showSchool" round position="bottom">
			<van-picker
				title="请选择学校"
				show-toolbar
				:columns="colSchool"
				@close="showSchool = false"
				@confirm="onConfirmSchool"
				@cancel="onCancel"
			/>
		</van-popup>

		<van-field
			v-model="college"
			is-link
			readonly
			name="college"
			@click="onClickCollege"
			label="学院"
			placeholder="请填写学院名称"
			required
			:rules="[{ required: true}]"
		/>
		<van-popup v-model="showCollege" round position="bottom">
			<van-picker
				title="请选择学院"
				show-toolbar
				:columns="colCollege"
				@close="showCollege = false"
				@confirm="onConfirmCollege"
				@cancel="onCancel"
			/>
		</van-popup>




		<van-field
			v-model="grade"
			is-link
			readonly
			name="grade"
			label="年级"
			placeholder="请选择年级"
			required
			@click="showGrade = true"
			:rules="[{ required: true}]"
		/>
		<van-popup v-model="showGrade" round position="bottom">
			<van-picker
				title="请选择年级"
				show-toolbar
				:columns="colGrade"
				@close="showGrade = false"
				@confirm="onConfirmGrade"
				@cancel="onCancel"
			/>
		</van-popup>			
		<van-field
			v-model="semester"
			name="semester"
			is-link
			readonly
			label="学期"
			placeholder="请选择学期"
			required
			@click="showSemester = true"
			:rules="[{ required: true}]"
		/>
		<van-popup v-model="showSemester" round position="bottom">
			<van-picker
				title="请选择学期"
				show-toolbar
				:columns="colSemester"
				default-index="2"
				@close="showSemester = false"
				@confirm="onConfirmSemester"
				@cancel="onCancel"
			/>
		</van-popup>

		<!-- <van-field
			v-model="major"
			name="major"
			clearable
			label="专业"
			placeholder="请填写专业"
						
		/>
		<van-field
			v-model="learnRequire"
			name="learnRequire"
			clearable
			label="学习要求"
			placeholder="请填写学习要求"
			
		/>
		<van-field
			v-model="teachProgress"
			name="teachProgress"
			clearable
			label="教学进度"
			placeholder="请填写教学进度"
			
		/> -->
		
	</div>
</template>

<script>
	import { viewSchool, viewCollege } from '@/api/school.js';
	export default {
		name: 'bankeInfo',
		created() {
			// 请求school 列表
			viewSchool(1,20).then(res => {
				const info = res.data.data.records;
				console.log(info);

				for(let i of info) {
					
					//console.log(i);
					this.colSchool.push(i.name);
					this.colSchoolId.push(i.id);
				}


			}).catch(err => {
				console.log(err);
			});

			

		},
		data() {
			return {
				detailBankeInfo: {},
				title: '', // 班级名称*
				courseName: '', // 课程名称*
				teacher: '',  // 任课教师
				college: '', // 学院*
				school: '', // 学校*
				major: '', // 专业
				grade: '', // 年级*
				semester: '2021-2022-1', // 学期*
				learnRequire: '', // 学习要求
				teachProgress: '', // 教学进度
				disable: false,
				showSchool : false, // 展示学校的选择器
				showCollege : false, // 展示学院的选择器
				showGrade : false,  // 展示年级的选择器
				showSemester : false,  // 展示学期的选择器
				colSchool: [],
				colSchoolId: [],
				colCollege: [],
				colCollegeId: [],
				colGrade: ['2020', '2021', '2022', '2023', '2024', '2025', '2026', '2027' ,'2028' ,'2029' ,'2030'], //  写死的年级选项 ，后期可改为动态的
				colSemester: ['2020-2021-1', '2020-2021-2','2021-2022-1','2021-2022-2',  
								'2022-2023-1','2022-2023-2','2023-2024-1','2023-2024-2',
								'2024-2025-1','2024-2025-2','2025-2026-1','2025-2026-2',
								'2026-2027-1','2026-2027-2','2027-2028-1','2027-2028-2',
								'2028-2029-1','2028-2029-2','2029-2030-1','2029-2030-2',
							],  //  写死的学期选项 ，后期可改为动态的
				schoolIndex: -1,     // 数组下标 根据学校名用来找对应的schoolId  和 找对应的collegeId！！
				collegeIndex: -1     // 数组下标 根据学校名用来找对应的schoolId  和 找对应的collegeId！！
			}
		},
		methods: {
			onConfirmGrade(value) {
				//Toast(`当前值：${value}, 当前索引：${index}`);
				this.grade = value;
				this.showGrade = false;
			},
			onConfirmSemester(value) {
				
				this.semester = value;
				this.showSemester = false;
			},
			onCancel() {  //  点击了选择器的取消
				this.showGrade = false;
				this.showSemester = false;
				this.showSchool = false;
				this.showCollege = false;
			},
			onConfirmSchool(value, index) {
				if(index != this.showSchool) { // 换了一个大学
					this.college = '';
				}
				this.school = value;
				this.showSchool = false;
				this.schoolIndex = index;
			},
			onConfirmCollege(value, index) {
				this.college = value;
				this.collegeIndex = index;
				this.showCollege = false;
			},
			async onClickCollege() {
				this.colCollege = [];
				this.colCollegeId = [];
				// 请求school 列表
				if(this.schoolIndex === -1) { // 未选择学校
					this.colCollege.push('无');
				} else { // 选择了学校
					await viewCollege(1,20,this.colSchoolId[this.schoolIndex]).then(res => {
						const info = res.data.data.records;
						console.log(info);
						for(let i of info) {
							this.colCollege.push(i.name);
							this.colCollegeId.push(i.id);
						}
					}).catch(err => {
						console.log(err);
					});
				}
				
				this.showCollege = true
				
			}
		}
	}
</script>

<style>
.van-field--disabled .van-field__label {
    color:#01050f;
}
.van-field__control:disabled {
    -webkit-text-fill-color: #042e46;
}
</style>
